<template>
    <div>
        <h1>TEST1</h1>
        <!-- <div class="box1"></div> -->
        <!-- <div class="box2"></div> -->
        <img class="box3" src="../assets/logo.png"/>
        <login-form/>   

        <div class="box4"></div>
        <button  v-if="ifs" v-show="show" v-zoc>button</button>
        <button @click="changeIf">changeIf</button>
        <button @click="changeShow">changeShow</button>
        <ul>
            <li v-for="(item ,index) in infos"
            :key="index"
            >{{item | filter1}}</li>
        </ul>
        {{time |filter2}}
    </div>
</template>
<script>
import loginForm from '@/components/loginForm.vue'
export default {
    methods:{
        changeIf(){
            this.ifs=!this.ifs
        },
        changeShow(){
            this.show=!this.show
        }
    },
    filters:{
        filter1(value){
            // console.log(value)
            return value.a
        },
        filter2(value){
            let date=new Date(value)
            let year=date.getFullYear()
            let month=date.getMonth()
            let day=date.getDate()
            let hour=date.getHours()
            let minute=date.getMinutes()
            let second=date.getSeconds()
            return 
            year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second
        }
    },
    data(){
        return{
            ifs:true,
            show:true,
            time:new Date(),
            infos:[
                {a:2,b:'ss'},
                {a:3,b:'sssss'},
                {a:66,b:'sas'}              ]
        }
    },
  components:{
      loginForm
  }
}
</script>
<style scoped>
    .box4{
        width: 100px;
        height: 100px;
        background: khaki;
        -webkit-animation: mymove4 0.5s infinite;

    }
    @-webkit-keyframes mymove4{
        from{
            background: khaki;   
 
        }
        to{
            /* background: beige; */
            /* -webkit-transform: translate3d(42px, -62px, -135px); */
            /* -webkit-transform-style: preserve-3d; */
            /* perspective(500px)这个属性是为了设置被组件被查看的位置 */
            -webkit-transform: perspective(500px) translateZ(-1000px);
        }
    }

    .box3{
        width: 20px;
        height: 20px;
        border-radius: 20px;
        background: black;
        -webkit-animation: mymove3 2s infinite;
    }
    @-webkit-keyframes mymove3{
       0%{
           background: black;
           transform: rotate(0deg);
       }
       50%{
           background: white;
           transform: rotate(180deg);
       }
       100%{
           background: black;
           transform: rotate(360deg);
       }
    }

    .box2{
        height: 50px;
        width: 50px;
        background-color: blueviolet;
        position: relative;
        -webkit-animation: mymove2 5s infinite;
    }
    @-webkit-keyframes mymove2{
        0%{top: 0px;background-color: aqua;}
        25%{top: 10px;background-color: azure;}
        50%{top: 200px;background-color: beige;}
        75%{top: 70px;background-color: blanchedalmond;}
        100%{top: 175px;background-color: bisque;}
    }
    .box1{
        height: 100px;
        width:100px;
        background-color: aqua;
        position: relative;
        -webkit-animation: mymove1 2s infinite;
    }

    @-webkit-keyframes mymove1{
        from{
            top: 0px;
            left: 0px;
            background-color: aqua;
            transform: rotate(7deg);
        }
        to{
            top: 200px;
            left: 200px;
            background-color: aquamarine;
            transform: rotate(89deg);
        }
    }

</style>